<template>
  <div>
    <el-card>
      <div slot="header">
        <div class="card-header">
          <el-page-header @back="back">
            <template>
              <div slot="content">
                <div class="out">
                  <p>活动管理</p>
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    @click="$router.push('promote-add')"
                    >添加</el-button
                  >
                </div>
              </div>
            </template>
          </el-page-header>
        </div>
      </div>
      <div>
        <el-table
          :data="db_activity"
          style="width: 100%"
          @cell-mouse-enter="show_btn"
          @cell-mouse-leave="hidden_btn"
          @row-dblclick = "show_detail"
        >
          <el-table-column
            align="center"
            prop="activityId"
            label="活动编号"
            width="width"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="activityName"
            label="活动名称"
            width="width"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="startDateTime"
            label="开始时间"
            width="width"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="endDateTime"
            label="结束时间"
            width="width"
          >
          </el-table-column>
          <el-table-column align="center">
            <template
              slot-scope="scope"
              v-if="currentItem.activityId == scope.row.activityId"
            >
              <i
                class="el-icon-s-tools"
                @click="handleEdit(scope.$index, scope.row)"
              >
              </i>
              <i
                class="el-icon-circle-close del-icon"
                @click="delItem(scope.row)"
              ></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
   
    
     <el-dialog
     
      title="详细信息"
      :visible.sync="dialogVisible"
      width="width"
      :before-close="dialogBeforeClose">
      <div>    <el-descriptions column="1"  border >
          <el-descriptions-item label="活动名称">{{currentItem.activityName}}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{currentItem.startDateTime}}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{currentItem.endDateTime}}</el-descriptions-item>
          <el-descriptions-item label="备注">
            {{currentItem.detail}}
          </el-descriptions-item>
          <el-descriptions-item label="活动类型">{{currentItem.type}}</el-descriptions-item>
           <el-descriptions-item label="降价" v-if="currentItem.type == '限时降价'">{{currentItem.discount}}</el-descriptions-item>
            <el-descriptions-item label="赠品" v-else>{{currentItem.gift}}</el-descriptions-item>
          <el-descriptions-item label="活动备注">{{currentItem.detail}}</el-descriptions-item>
      </el-descriptions></div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  
</template>


<script>
import { mapState } from "vuex";
export default {
  watch: {
    db_activity: {
      deep: true,
      immediate: true,
      handler: function () {
        let id = 1;
        this.formData.splice(0, this.formData.length);
        for (let i of this.db_activity) {
          i.activityId = this.formData.length;
          this.formData.push(i);
        }
      },
    },
  },
  computed: {
    ...mapState(["db_activity", "current_property"]),
  },
  methods: {
    show_detail(row, column, event){
      this.dialogVisible = true
    },
    show_btn(row) {
      this.currentItem = row;
    },
    hidden_btn(row) {

    },
    delItem(row) {
      this.$store.commit("del_current_activity", row.activityId);
    },
    handleEdit(index, row) {
      console.log("row", row);
      this.$store.commit("set_current_activity", row);
      this.$router.push("/home/promote-update");
    },
    back() {
      this.$router.go(-1);
    },
  },
  data() {
    return {
      dialogVisible:false,
      currentItem: {
        activityId: "",
        name: "",
        startDateTime: "",
        endDateTime: "",
        type: "",
        range: "",
        postImg: null,
        detail: "",
        discount: 0,
        gift: "",
      },
      formData: [
        // {
        //    activityId:'001',
        //    activityName:'年终放送',
        //    startDateTime:'1630226301',
        //    endDateTime:'1632904700',
        // },
      ],
    };
  },
};
</script>
<style scoped>
/*-------------------------表头样式-------------------*/
.el-card {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.card-header {
  width: 100%;
  align-items: center;
}
.card-header p {
  text-align: center;
  font-weight: bold;
  flex: 1;
}
.card-header .el-button {
  margin: 0.5rem;
}
.out {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-page-header {
  width: 100%;
}
.card-header >>> .el-page-header__content {
  flex: 1;
}
.card-header >>> .el-page-header__left {
  align-items: center;
}
/*--------------------------------------------------------*/
.el-card {
  margin-top: 2rem;
}
.del-icon {
  margin-left: 1rem;
}
</style>